<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="color-scheme" content="light dark" />
    <title>Design Tokens Technical Reports 2025.10</title>
    <meta name="color-scheme" content="light-dark" />
    <script
      src="https://www.w3.org/Tools/respec/respec-w3c"
      class="remove"
      defer
    ></script>
    <script class="remove">
      const respecConfig = {
        specStatus: 'CG-DRAFT',
        isPreview: true,
        group: 'design-tokens',
        latestVersion: 'https://www.designtokens.org/TR/2025.10/',
        prevVersion: null,
        edDraftURI: null, // MUST be null for community group
        editors: [
          { name: 'Louis Chenais', url: 'https://bsky.app/profile/lucho.cool' },
          { name: 'Mike Kamminga', url: 'https://x.com/mikekamminga' },
          { name: 'Kathleen McMahon', url: 'https://kathleenmcmahon.dev' },
          { name: 'Drew Powers', url: 'https://pow.rs' },
          { name: 'Matthew Ström-Awn', url: 'https://matthewstrom.com' },
          { name: 'Donna Vitan', url: 'https://www.donnavitan.com' },
        ],
        authors: [
          { name: 'Daniel Banks', url: 'https://x.com/dbanksDesign' },
          { name: 'Esther Cheran', url: 'https://github.com/esthercheran' },
          { name: 'Andrew L’Homme' },
          {
            name: 'Ayesha Mazrana (Mazumdar)',
            url: 'https://x.com/AyeshaKMaz',
          },
          { name: 'James Nash', url: 'https://cirrus.twiddles.com' },
          { name: 'Adekunle Oduye', url: 'https://www.adekunleoduye.com' },
          { name: 'Kevin Powell', url: 'https://x.com/kevinmpowell' },
          { name: 'Lilith Wittmann', url: 'https://github.com/LilithWittmann' },
        ],
        github: {
          repoURL: 'https://github.com/design-tokens/community-group',
          branch: 'main',
        },
        tocIntroductory: true,
        logos: [
          {
            src: '/assets/dtcg-logo-on-color.svg',
            url: 'https://www.designtokens.org',
            alt: 'Design Tokens Community Group',
            width: 128,
            height: 128,
            id: 'dtcg-logo',
          },
        ],
      };
    </script>
  </head>

  <body>
    <p class="copyright remove"></p>
    <section id="abstract">
      <p>
        Design tokens are indivisible pieces of a design system such as colors,
        spacing, typography scale.
      </p>
      <p>
        Design tokens were created by the Salesforce design system team, and the
        name comes from them (<a href="https://x.com/jonnyl">Jon</a> &amp;
        <a href="https://x.com/jina">Jina</a>).
      </p>
    </section>
    <section id="sotd">
      <p>
        This section describes the status of this document at the time of its
        publication. Other documents may supersede this document. A list of
        current W3C Community Group reports and the latest revision of this
        report can be found in the W3C Community Group reports index at
        <a href="https://www.w3.org/community/reports/"
          >https://www.w3.org/community/reports/</a
        >.
      </p>
      <p>
        ⚠️ This is a <strong>preview draft</strong> of in progress changes. Do
        not refer to this document directly, and do not implement anything in
        this document.
      </p>
    </section>
    <section id="modules">
      <h1>Modules</h1>
      <p>The Design Tokens specification is composed of multiple modules:</p>
      <ul>
        <li>
          <a href="./format/">Format</a>
        </li>
        <li><a href="./color/">Color</a></li>
        <li><a href="./resolver/">Resolver</a></li>
      </ul>
    </section>
    <section
      data-include="./resources.md"
      data-include-format="markdown"
    ></section>

    <section class="appendix">
      <h2>Acknowledgements</h2>
      <p>
        We'd also like to thank the following contributors:
        <span id="gh-contributors"><!-- filled by ReSpec --></span>.
      </p>
    </section>
  </body>
</html>
